<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科室导航</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!-- <script src="../lib/vue.js"></script>
    <script src="https: //unpkg.com/axios/dist/axios.min.js"></script> -->
    <style>
        .list-group-item-action:hover {
            background-color: rgb(198, 116, 252);
        }

        .fr {
            float: right;
        }
    </style>
    <link rel="stylesheet" href="lib/head.css">
</head>

<body>
    <div id="app">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-md navbar-dark" style="background-color: rgb(136, 136, 240)">
            <a class="navbar-brand" href="#">东方之光医院<span>🏥</span></a>
            <div class="collapse navbar-collapse" id="collapsibleNavId">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active ml-4">
                        <a class="nav-link" href="welcome.html">首页 <span class="sr-only">(current)</span></a>
                    </li>

                    <li class="nav-item dropdown ml-4">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">医院概况</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownId">
                            <a class="dropdown-item" href="instroduction.html">医院介绍</a>
                            <a class="dropdown-item" href="history.html">医院历史</a>
                        </div>
                    </li>
                    <li class="nav-item dropdown ml-4">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">医疗服务</a>
                        <div class="dropdown-menu" aria-labelledby="dropdownId">
                            <a class="dropdown-item" href="index.html">门诊排班</a>
                            <a class="dropdown-item" href="index.html">预约挂号</a>
                            <a class="dropdown-item" href="PatientServices.html">住院须知</a>
                            <a class="dropdown-item" href="insurance.html">医保专区</a>
                        </div>
                    </li>

                    <li class="nav-item ml-4">
                        <a class="nav-link" href="index.html">科室导航</a>
                    </li>
                    <li class="nav-item ml-4">
                        <a class="nav-link" href="https://www.csuft.edu.cn/">学术交流</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="text" placeholder="Search" v-model="search">
                    <button class="btn btn-success my-2 my-sm-0" type="submit">搜索</button>
                </form>
            </div>
        </nav>

        <!-- 头部图片head -->

        <div class="ban_pic" style="background-image:url('https://www.xiangya.com.cn/images/ban_ksdh.jpg')">
            <div class="ban_nr">
                <h1>科室导航</h1>
                <p>东方之光医院（Light of the East Hospital）始建于1906年，坐落在人文荟萃的楚汉名城长沙，是国家卫生健康委员会直管的三级甲等综合医院，是教育部直属高校
                    中南大学的附属医院，是我国重要的临床诊疗、医学教育与科技创新中心，以精湛的诊疗技术、卓越的科教实力、深厚的文化底蕴享誉海内外。</p>
            </div>
        </div>

        <!--  -->
        <div class="jumbotron jumbotron-fluid py-3">
            <!-- <div class="container">
                <h1 class="display-4">线上预约挂号</h1>
                <p class="lead">{{title}}</p>
            </div> -->
            <nav class="breadcrumb" style="margin-bottom: 0px; padding-bottom: 5px;">
                <p>
                    <span style="text-decoration: none; color: rgb(111, 105, 105);"> 科室导航 / </span>
                    <span>
                        <a href="department.html" style="text-decoration: none;"
                            v-if="currentDept!=null">{{currentDept}}排班
                            /
                        </a>
                        <a href="#" style="text-decoration: none;" @click="handleChoice" v-else>请选择科室 /</a></span>
                    <span><a href="patient.html" style="text-decoration: none;">就诊人管理 / </a></span>
                    <span><a href="appointment.html" style="text-decoration: none;">预约挂号 </a></span>
                </p>
            </nav>
        </div>

        <div class="container-fluid" style="background-image: url(lib/bg.png);">
            <div class="row">
                <!-- 左边 -->
                <div class="offset-md-1 col-md-2 col-sm-12 col-12">
                    <h1 class="lead">科室导航</h1>
                    <!-- 列表 -->
                    <ul class="list-group">
                        <li class="list-group-item" v-for="(item, index) in department" :key="index">
                            {{item.title}}
                            <div class="list-group">
                                <a v-for="(i, index) in item.sub" :key="index"
                                    class="list-group-item list-group-item-action"
                                    @click="getCurrDept(i)">{{i.title}}</a>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 右边 -->
                <div class="col-md-8 col-12">
                    <h1 class="lead">{{currentDept}}门诊排班</h1>
                    <!-- 卡片 -->
                    <div class="row">
                        <div class="col-md-3 col-sm-6 mb-3" v-for="(item, index) in doc" :key="index">
                            <div class="card">
                                <img :src="item.img" style="width: 220px;height: 210px;">
                                <div class="card-body">
                                    <h3 class="card-title">{{item.name}}</h3>
                                    <p class="card-text">{{item.level}}</p>
                                    <p class="card-text">{{item.department.title}}</p>
                                    <a @click="getDoctor(item)" type="button" class="btn btn-outline-danger">挂号</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚&网址地图 -->
    <!-- <div class="ban_pic" style="background-image:url('https://www.xiangya.com.cn/images/foot_bj.jpg')"> -->
    <div class="ban_pic" style="background-color:rgb(136, 136, 240);">
        <div class="ban_nr">
            <p class="lead text-center">Copyright© 2022 每天赚五块 版权所有 Powered by daydaygetfive.com</p>
            <p>
                <img src="/yxy-ruan4/html/lib/2wm.png">
            </p>
            <p class="lead text-center">组员：潘晴晴 | 文舒琪 | 易新宇 | 刘家 | 蒋佳骏 | 罗忻欣 | 谭新纪</p>
        </div>
    </div>

    <!-- bootstrap一些简单的交互函数操作 -->
    <script src="lib/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                title: '东方之光医院',
                department: null,
                currentDept: null,
                doc: [],
                search: '搜索科室'
            }

        },
        mounted() {
            this.setSession(this.currentDept);
            this.getallDepart();
        },
        methods: {
            getDoctor(doctor) {
                sessionStorage.setItem("doctor", JSON.stringify(doctor));
                window.location.href = "doctor.html";
            },
            getallDepart() {
                axios.get('http://121.196.41.117:8080/api/department') //获取科室
                    .then(res => {
                        vm.department = res.data
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            setSession(name) {
                sessionStorage.setItem('currentDept', name)
            },
            getCurrDept(curdept) {
                this.doc = []
                this.currentDept = curdept.title
                this.setSession(JSON.stringify(curdept))
                axios.get(`http://121.196.41.117:8080/api/doctor/${curdept.id}`)  //获取医生信息接口
                    .then(res => {
                        let alldoc = res.data
                        alldoc.forEach(element => {
                            if (element.department.id == curdept.id) {
                                this.doc.push(element)
                            }
                        });
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            handleChoice() {
                alert('请先选择科室！')
            }
        },
    })
</script>